<template>
  <div v-if="item.id" class="van-hairline--top van-hairline--left van-hairline--right">
    <van-card :price="item.price*0.5+0.99" :desc="item.description" :title="item.setmealName" :origin-price="item.price"
      :thumb="image" @click="goSetmealDetail(item)">
      <template #tags>
        <van-tag plain type="danger">月售200+</van-tag>
      </template>
      <template #footer>
        <!-- <van-stepper v-model="cartItem.num" theme="round" button-size="22" disable-input min="0"
          v-if="cartItem.num > 0" /> -->
        <van-button round color="linear-gradient(to right, #ff6034, #ee0a24)" icon="plus" type="primary" size="mini"
          @click.prevent.stop="addCart"/>
      </template>
    </van-card>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import store from '@/store'
import request from '@/utils/request'
import { Toast } from 'vant'

export default {
  name: 'SetmealItemOfList',
  // import引入的组件需要注入到对象中才能使用
  components: {
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
  // 这里存放数据
    return {
      baseCart: '/shopping-cart',
      cartItem: {
        id: 0,
        dishId: 0,
        setmeal: 0,
        num: 0,
        flavorString: '',
        totalMoney: 0
      },
      image: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
  },
  // 方法集合
  methods: {
    // 跳转到套餐详情界面
    goSetmealDetail (setmealBasicDto) {
      this.$router.push({
        name: 'SetmealDetail',
        params: {
          setmealBasicDto
        }
      })
    },
    // 加入购物车
    addCart () {
      this.cartItem.setmealId = this.item.id
      this.cartItem.num = 1
      this.cartItem.totalMoney = this.item.price * 0.5 + 0.99
      // console.log(this.cartItem)
      // 判断当前用户是否登录（即有无token）
      const token = store.state.user.userInfo.accessToken
      if (!token) {
        this.$dialog.confirm({
          title: '温馨提示',
          message: '此时需要先登录才能继续操作哦',
          confirmButtonText: '去登录',
          cancelButtonText: '再逛逛'
        }).then(() => {
          this.$router.replace({
            path: '/login',
            query: {
              backUrl: this.$route.fullPath
            }
          })
        }).catch(() => {
          this.cartItem.num = 0
        })
      } else {
        // 执行加入购物车操作
        Toast.success('加入成功')
        request({
          url: this.baseCart + '/shopping-cart',
          method: 'post',
          data: this.cartItem
        }).then(() => {
          this.$store.dispatch('cart/getCartAction')
        })
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.image = this.item.image.split(',')[0]
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.van-card {
    background-color: #fff;
}
</style>
